<template>
  <el-row justify="center">

    <el-col class="headimg" :span="8">
      <el-avatar :size="HeadSize" :src="HeadSRC"></el-avatar>
    </el-col>

    <el-col :span="2" v-if="isShow">
      <div class="cutline"></div>
    </el-col>

    <el-col :span="12" v-if="isShow">
      <el-row>
        <div class="name">{{ account }}</div>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-tag class="ml-2" :type=TagType[level] effect="light" size="small">{{ TagText[level] }}</el-tag>
      </el-row>
    </el-col>

  </el-row>
</template>

<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import pinia from "../../store";
import { userStore } from "../../store/user";

const user = userStore(pinia);
const { level, account } = storeToRefs(user);
const HeadSRC =
  "https://typora-1312299359.cos.ap-beijing-1.myqcloud.com/icon/bitLogo2.jpg";
const isShow = ref(true);
const HeadSize = ref(50);
const TagType = ["info", "success"];
const TagText = ["Normal User", "Administrator"];


//监听屏幕宽度
window.onresize = () => {
  // console.log(user.getTokens);
  if (window.innerWidth < 600) {
    isShow.value = false;
    HeadSize.value = 35;
  } else {
    isShow.value = true;
    HeadSize.value = 50;
  }
};
//根据屏幕宽度判断是否显示头像旁边的信息
if (window.innerWidth < 600) {
  isShow.value = false;
  HeadSize.value = 35;
} else {
  isShow.value = true;
  HeadSize.value = 50;
}
</script>

<style scope>
.headimg {
  display: flex;
  align-items: center;
}

.cutline {
  width: 0.5px;
  height: 100%;
  background-color: white;
  border-radius: 10px;
}

.name {
  margin-top: 5px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.ml-2 {
  margin-bottom: 10px;
}
</style>